react ssr Next.js 之 服務器渲染

這個真的頭疼啊， 百度丫的怎么就不能出一個規(guī)范解決spa問題， API請求的時間要控制好， 最好不要超過半秒。

先安裝isomorphic-unfetch
修改my Page

import {Link, HeadF$ }from '../../next'
import fetch from 'isomorphic-unfetch'

const view$ =  HeadF$({
    title: 'my'
})
((props) =>
  <div>
    <p>my Page</p>
    <Link href="/">
      <a>go to index</a>
    </Link>
    <p>service</p>
    {
      // props.data.data.map(e => 
      //    <p>{e}</p>
      // )
      <p>fetch result:{props.data.error}</p>
    }
  </div>
)

view$.getInitialProps = async function() {
  const URL = 'https://upload.qiniup.com/'
  const res = await fetch(URL)
  const data = await res.json()

  return {
    data: data
  }
}

export default view$

然后打開view-source:http://localhost:3000/my
看到源碼

可以看到已經(jīng)在服務端渲染了。

嗯， 就是這樣簡單。

未完...
構建大型項目肯定不能就這么設計， 等下再寫， 我先寫下第三部分比較重要的， 如何配合redux。