Isomorphic SSR 的第一哩路： Next.js

什麼是 SSR？爲何要 SSR？

SSR 是 Sever-side Render 的縮寫，意思是指「在 Server 端就產生（Render）出畫面」。目前大概有幾種產生畫面的時機點：

1. Server Side Render: 在後端接收到 Request 即產生 HTML 畫面，須要新的資料則須要從新發送 Request ，也會產生一個新的畫面。後端的 Framework 一般都會有一個 HTML Template 的機制就是在產生畫面的動做。
2. Client Side Render: 在前端進行 Render，後端做爲資料供應的 API 層。當須要新的資料時，前端發送 Request 後只須要部份更新畫面就好。
3. Isomorphic: 網站可以同時考慮 SSR 與 CSR 兩種方式，以前有整理過關於 Isomorphic 的介紹。

最先期的網站都是 SSR 的方式進行，但每次的從新 Render 會形成後端的負擔提高也讓使用者的體驗變差。然後來的 React/Vue 之類的 Framework 則是基於 CSR 的方式讓使用者體驗，並達到了先後端分離的優勢。但 CSR 仍是伴隨着幾個問題：

1. 有些 CSR 的網站會形成爬蟲取得的頁面不是那麼完整，形成 SEO 的問題
2. 第一次載入畫面是等到前端載入後，會有一段時間的空白

所以，若是可以兼具 CSR 與 SSR 的 Isomorphic ，成了一條新的解法。如下咱們講的 SSR 都是 Isomorphic 同時兼具兩種方式的 SSR。

Next.js

「Next.js is a lightweight framework for static and server‑rendered applications.」

Next 是一個基於 React 的 SSR 解決方案，更多的細節能夠參考官網。

開始第一個 Next.js 專案吧！

方法 ①： 手動安裝

根據官方的教學，能夠透過 NPM 的方式手動安裝：

$ npm install --save next react react-dom
複製代碼

接着再把 package.json 中執行的方式改爲 NEXT：

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}
複製代碼

而後創建一個頁面在 /pages/index.js 檔案：

export default () => <div>Welcome to next.js!</div>
複製代碼

最後，運行指令就會將專案跑在 3000 PORT：

npm run dev
複製代碼

方法 ②： create-next-app

許多人開發 React 會搭配 create-react-app 的 scaffold 來跳過複雜的環境設定，Next.js 也有：

$ npm install -g create-next-app

$ create-next-app my-app
$ cd my-app/
$ yarn start
複製代碼

來看一個簡單 Isomorphic 範例

增長一個新頁面

Next 是根據 /pages 目錄做爲 Route 的分配，舉例來講 /pages 的 index 就會對應到 Root URL。咱們先在 /pages 目錄下創建一個 hello.js 的檔案：

const Hello = (props) => (
    <div>
        <h1>Hello Next</h1>
    </div>
)

export default Hello
複製代碼

此時就會多了一個 Route 在 /hello 。

兩個頁面彼此連結

在 Next 中提供了 Link 的 Component 讓咱們能夠進行頁面間的 Client Side 換頁：

import Link from 'next/link'

const Hello = (props) => (
    <div>
        <Link href={`/`}>
          <a>index</a>
        </Link>
        <Link href={`/hello`}>
          <a>hello</a>
        </Link>
    </div>
)

export default Hello
複製代碼

CSR 與 SSR 判斷

咱們如今有一個頁面，上面有連結。咱們前面有說過 Next.js 是一個兼具 CSR 與 SSR 的框架，那他是怎麼處理的呢？先區分一下兩種來源：

• 若是直接點 Link 連結，是在 Client Side 換頁 => CSR
• 從新整理，或是第一次到這個畫面上，必須先發 Request 到後端 => SSR

Next 的作法是透過 getInitialProps 的方式，在 Render 以前就先透過 req 來判斷來源爲什麼：

import Link from 'next/link'

const Hello = (props) => (
    <div>
        <h1>{props.text}</h1>
        <Link href={`/hello`}>
            <a>reload</a>
        </Link>
    </div>
)

Hello.getInitialProps = async function({req, query}) {
  if (req)
    return { text: 'hello server' }
  return { text: 'hello client' }
}

export default Hello
複製代碼

這樣執行以後，咱們能夠發現：

• 若是是 SSR 的話，會在 getInitialProps 取得 req
• 若是是 CSR 的話，getInitialProps 中不會獲得 req

小結論

Next 能夠優雅地替咱們解決 Isomorphic 的複雜機制，達到同時有 SSR 與 CSR 的解法。透過了簡單的實做來了解如何開始，若是以後新專案有須要是直得考慮導入的！

Reference

1. Next.js
2. create-next-app

---

License

本著做由Chang Wei-Yaun (v123582)製做， 以創用CC 姓名標示-相同方式分享 3.0 Unported受權條款釋出。