Never Nop Tech

Never Nop Tech

創造意義,動手去做。

React Server Side Render(SSR) 後端渲染使用Next.js框架

1.前言

在寫React這個前端函式庫時常會遇到SEO(搜尋引擎優化)問題、兩隻CSS樣式名稱重複問題,因此就嘗試了Server Side Render,也就是用一個後端伺服器先去渲染一次,所以在檢查原始碼時,呼叫異步的API也能呈現。

實作方式是利用NextJS,他是個react框架,在github上有4萬多顆星

NextJS官方:https://nextjs.org/

 

2.功用

如圖1,利用fetch呼叫了異步API,呈現時如圖2,呈現出列表,而檢查原始碼時卻能夠出現fetch的文字。

 

截圖 2020-01-14 上午10.07.19

圖1

截圖 2020-01-14 上午10.05.27

圖2

截圖 2020-01-14 上午10.06.00

圖3

3.範例

程式碼:

https://github.com/unromanticman/ssr-react-next.js