Open yaofly2012 opened 5 years ago
pages
目录下的JS文件;encodeURIComponent
(哪里做的);取QS参数
利用withRouter
方法注入router
属性(可以对任意组件注入该属性),然后通过该属性访问路由QueryString。
Route masking(实现干净简洁的URL) 怎么翻译?有点类似给URL取个别名。 原理是什么?reload发生404貌似是前端实现的别名。
自定义服务-结合express
统一了SSR调用接口的规范。
CSS开发方式也变了
CSS组件化隔离
还不会
__NEXT_DATA__
干嘛用的?发现是getInitialProps
方法获取到的相关值.babelrc
文件,则nextjs就把他当做对babel的配置,并且nextjs本身也会采用这里的自定义的配置,所以如果自定义babel配置,必须把next依赖的配置也配上。next路由系统整体两方面:
服务端:基于文件系统路由生成规则;
客户端: 支持单页应用的客户端路由系统。
Simple client-side routing (page based)
nextjs的路由是基于文件系统的。 那个pages目录下的所有文件都会被当初路由吗? 甚至_error, _app, _document, [动态路由] ?
Link组件管理前端页面切换?是API方式的语法糖?
好像没这么简单。动态路由时,href的用处呢?路由参数取值是从as指定的URL里取的
Warning: You're using a string directly inside . This usage has been deprecated. Please add an tag as child of
为啥?
管理页面切换
注意: 回调函数的参数url是表示展示在浏览器里的URL(即用户看到的URL)。
Router events should be registered when a component mounts (useEffect or componentDidMount/componentWillUnmount) or imperatively when an event happens.
整个都是客户端路由体系,理应只在客户端才进行Router的操作。
next为了正常处理单页应用的页面切换,监听posState事件。
If the function you pass into beforePopState returns false, Router will not handle popstate;
测试发现只是没有发生页面切换,但是浏览器URL还是改成目标的url了。
改变URL但不用执行页面的getInitialProps
。
Shadow Routing存在的意义:
Shallow routing works only for same page URL changes.
即页面A里跳转页面A,并且只有当跳转当前页面时shadow routing才有效。
场景呢?
除了不执行getInitialProps
还有什么不同呢?
The above router object comes with an API similar to next/router.
两个对象不是一样的
keys in router: pathname,route,query,asPath,events,push,replace,reload,back,prefetch,beforePopState
keys in Router: router,readyCallbacks,ready,push,replace,reload,back,prefetch,beforePopState
区别在哪里?为啥存在这些差别?
通过withRouter
注入的router对象和通过useRouter获取的router对象不相等,但是属性一样。
If useRouter is not the best fit for you, withRouter can also add the same router object to any component
什么情况下不适合使用withRouter
?
一般直接把'next/router'模块默认导出命名为Router
,但这并不是Router对象(属于具体一个应用的路由实例对象),通过useRouter或者withRouter可以获取应用的Router对象。
Above Router object comes with the following API:
- route - String of the current route
- pathname - String of the current path excluding the query string
- query - Object with the parsed query string. Defaults to {}.
- asPath - String of the actual path (including the query) shows in the browser
- push(url, as=url) - performs a pushState call with the given url
- replace(url, as=url) - performs a replaceState call with the given url
- beforePopState(cb=function) - intercept popstate before router processes the event
const CustomLink = withRouter(({children, href, router}) => {
var routerGotByHook = useRouter();
console.log(`keys in Router: ${Object.keys(Router)}`)
console.log(`keys in router got by useRouter: ${Object.keys(routerGotByHook)}`)
console.log(`keys in router got by withRouter: ${Object.keys(router)}`)
console.log(`routerGotByHook === router -> ${routerGotByHook === router}`)
console.log(`routerGotByHook === Router -> ${routerGotByHook === Router}`)
console.log(`router === Router -> ${router === Router}`)
return (
<a href={href} onClick={onClickHandler(href)}>
{children}
<style jsx>{`
a {
margin-right: 10px;
}
`}</style>
</a>
)
})
Router对象API:
有些方法和'next/router'的导出模块一样的。
Error: Route name should start with a "/", got "post/or-here"
为何?
next前端页面切换都做些什么?
Sometimes when switching between pages, Next.js needs to download pages(chunks) from the server before rendering the page. And it may also need to wait for the data. So while doing these tasks, browser might be non responsive.
在Page组件模块和在APP组件模块里给Router添加事件有什么不同吗? 看现象没有区别呢?Router应该是单例的吧?可以添加多个事件处理函数吗?
You should only use "next/router" inside the client side of your app.
为何Router.events.on
可以,而Router.beforePopState
不可以
Using router events in getInitialProps is discouraged as it may result in unexpected behavior.
怎么个'unexpected behavior.' ?
版本:Next.js 9 or newer.
? a.k.a. url slugs, pretty urls, et al
规则见引入背景:
- A filename or directory name that is wrapped with [] would be considered a named parameter
- Explicit route segments would take priority over dynamic segments, matched from left-to-right
- Route parameters would be required, never optional
- Route parameters will be merged into the query object (accessible from getInitialProps or router via withRouter) — these parameters can not be overridden by a query parameter
如何从服务端获取路径参数的值?
Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
utils.js:12 Warning: You're using a string directly inside . This usage has been deprecated. Please add an tag as child of
Optional route parameters are not expressible through the filesystem.
对比下公司老框架SAP来看next 组成:
pages目录下除了可以放置页面外还可以定义接口,2个约定:
TypeError: resolver is not a function
export default (req, res) => {}
接口配置?
export const config = {
api: {
bodyParser: false
}
};
const next = require('next');
const app = next(opts: object);
渲染指定的页面,中间件函数。
app.render(req, res, '/a', req.query)
app.render
方法的四个实参构成了getInitialProps函数
的实参对象的属性。
get: async ({ req, res, pagePath, queryParams}) => ({
// 获取新鲜数据的方式
data: await app.renderToHTML(req, res, pagePath, queryParams)
})
渲染指定页面,返回页面HTML字符串。
获取nextjs默认的路由匹配函数
next
函数的参数对象的dev, dir,quiet
配置为啥不能再next.config.js
里配置?自定义路由是建立在自定义web服务之上的。
Server Side Rendering (SSR) is a luxurious
引用fastify,得研究研究
Framework | Version | Router? | Requests/sec |
---|---|---|---|
hapi | 18.1.0 | ✓ | 29,998 |
Express | 4.16.4 | ✓ | 38,510 |
Restify | 8.0.0 | ✓ | 39,331 |
Koa | 2.7.0 | ✗ | 50,933 |
Fastify | 2.0.0 | ✓ | 76,835 |
http.Server | 10.15.2 | ✗ | 71,768 |
配置文件约定项目根目录的next.config.js
文件
js文件里也可以写jsx,为啥还需要jsx后缀的文件?
为啥要自定义buildID(默认实现方案【怎么实现的?】无法支持多服务build时统一的buildId ?)
利用process.env
访问配置变量。
process.env
方式引用吗?怎么实现的?process.env
? 注意事项:
Issues/Concern:
serverRuntimeConfig
的值喷到页面时,Client端有个waring: ??
Warning: Text content did not match. Server: "serverRuntimeConfig.mySecret = secret" Client: "serverRuntimeConfig.mySecret = undefined"
存在SSR时才报,客户端路由不报。 SSR和CSR渲染的内容不一致,应该是FOFT问题
貌似是ReactDOM报的。FOUC: Warning: Text content did not match. Server: "...css..."
关于FOUC的文章也很多啊
Nextjs是什么?
Docs
Page
这个概念构建。React脚手架
create-react-app umi next