react ssr 之 next 最佳实战 （三）

react ssr Next.js 之 服务器渲染

这个真的头疼啊， 百度丫的怎么就不能出一个规范解决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
看到源码

可以看到已经在服务端渲染了。

嗯， 就是这样简单。

未完...
构建大型项目肯定不能就这么设计， 等下再写， 我先写下第三部分比较重要的， 如何配合redux。