owned this note   changed 4 years ago  
Linked with GitHub

pppr - 解決 JavaScript 無法被搜尋引擎正確索引的問題 ／ Kewang（王慕羣）

歡迎來到 Modern Web 2020 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@ModernWeb/2020
手機版請點選上方 按鈕展開議程列表。

簡報下載

共筆從這開始

工商：Funliday

CSR & SSR

CSR - client side rendering

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • Server 會回傳前端所需要的資料，渲染方式由前端決定

SSR - server side rendering

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • Server 會回傳完整的HTML資料到前端

Why SSR?

social media

  • Facebook、twitter大量使用Meta Tags
    • meta tags

SEO

Search Engine Results Page

How SSR?

  • 用框架 Next.js
  • Common SSR steps
    1. Write server code at client page
    2. Modify webpack build flow

SSR cons缺點
ㆍCode complexity increases
ㆍCan't separate server and client code
ㆍEvery route need an extra API to generate data
ㆍAvoid to run window' or other DOM objects at server code

What is prerender?

Puppeteer is essential component for SSR.

pppr - enhanced prerender

tags: MW20 語言與開發 Render
Select a repo