Coding-everyday

# 1. Next 中常见文件的作用

  • next.config.js：next.js的配置文件
  • _app.js：覆盖next的app.js
  • @zeit/next-css：next中加载css

# 2. Next 路由传递参数

Next路由传递参数，只能通过query(b?id=1)，不能params(/b/id/1)，但是可以通过路由映射，as='/b/1'，使URL好看

# 3. 自定义APP作用

  1. 固定layout
  2. 保持一些公用的状态
  3. 给页面传入一些自定义数据
  4. 自定义错误处理

注意：自定义App，必须重写APP的getIntialProps方法

# 4. 自定义 Document

  • 只有在服务端渲染的时候才会执行

  • 用来修改服务端渲染的文档内容

  • 一般用来配合第三方css-in-js方案使用

  • 要么不覆盖Document的getInitialProps，要么至少将Document的getInitialProps结果返回出去，不要忘了传参ctx。

  • 对于render函数也一样，要么不覆盖，要么就要写出Html、Head、body、Main、NextScript结构，否则缺失。

不推荐在_document.js中定义title，应该在pages每个页面引入Head，然后定义title

babel-plugin-styled-components，ssr：true：客户端和服务端生成的css名字一样

# 5. 异步组件的加载, 等到了调到它的地方再加载

import dynamic from 'next/dynamic'

const Comp = dynamic(import('components/test'))

异步模块加载的意思是，等到进入某个页面再加载js，而不是一上来全都加载了。

比如在getInitialProps方法中，const moment = await import('moment')，然后moment.default...

# 6. Next 集成 redux 需要考虑

  • 服务端如何写入数据到store
  • 如何同步服务端的数据到客户端

# 7. Next 流程

Next 流程

# 8. Next 集成redux

  1. 主要在于lib/with-redux-store.js和_app.js
  2. withRedux包裹 App，其本身也有getInitialProps法，在此方法中getOrCreateStore，注意 server端和client端不一样的逻辑，服务端每次都initializeStore，防止不同用户共用数据，客户端需要看之前有没有

# 9. withRouter

  • 用withRouter包裹，就可以在组件中获得router对象，其上有pathnane、query等属性
  • withRouter包裹在connect外面，否则与withRouter的shouldComponentUpdate冲突，引起错误。

# 10. next_data属性

next服务端渲染的时候，getInitialProps把数据放在html的next_data属性中，在客户端第一次渲染的时候不会重新请求，从而保证数据同步

# 11. 关于getInitialProps方法

Next.js 在做服务器端渲染的时候，页面对应的 React 组件的 getInitialProps 函数被调用，异步结果就是“脱水”数据的重要部分，除了传给页面 React 组件完成渲染，还放在内嵌 script 的 __NEXT_DATA__ 中。

在浏览器端渲染的时候，不会去调用 getInitialProps ，直接通过 __NEXT_DATA__ 中的“脱水”数据来启动页面 React 组件的渲染。这样一来，如果 getInitialProps 中有调用 API 的异步操作，只在服务器端做一次，浏览器端就不用做了。

# 11.1. 那么，getInitialProps 什么时候会在浏览器端调用呢？

当在单页应用中做页面切换的时候，比如从 Home 页切换到 Product 页，这时候完全和服务器端没关系，只能靠浏览器端自己了，Product页面的 getInitialProps 函数就会在浏览器端被调用，得到的数据用来开启页面的 React 原生生命周期过程。

# 12. getInitialProps入参对象的属性如下：

pathname   // URL 的 path 部分
query   // URL 的 query 部分，并被解析成对象
asPath   // 显示在浏览器中的实际路径（包含查询部分），为String类型
req   // HTTP 请求对象 (只有服务器端有)
res   // HTTP 返回对象 (只有服务器端有)
jsonPageRes   // 获取数据响应对象 (只有客户端有)
err   // 渲染过程中的任何错误

# 13. SSR项目引入组件，提示window未定义

  1. 用动态导入，nextjs的dynaimic
  2. 先定义变量，判断window存在的时候才引入。实践证明，这种方法好用，比如braft-editor

← preset-env →