# nextssr **Repository Path**: chen-xiaocheng545/nextssr ## Basic Information - **Project Name**: nextssr - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-10-14 - **Last Updated**: 2024-10-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # nextjs ## 路由 pages目录下会作为路由 在pages下的`_app.jsx`会被作为模版, 所有的页面都会在这里渲染 路由： pages下的文件夹会作为路由 动态路由： `/movies/[id].jsx` `/movies/[...parmas].jsx` 路由跳转 - link跳转 - 方法跳转 404页面 error页面 ## 标题、样式、图片 标题 `首页` 服务端会重新组装页面head 样式 - 全局样式得在`_app.jsx`中引入 - 局部样式在文件命名中得改为`xxx.module.css` 文件名带有module，webpack打包才会开启cssmodule 静态资源 `public`目录下的内容都是静态资源 ## api请求代理 pages目录下api目录会接收对应的请求 ## pre-render pre-render: 预渲染 1. 纯静态化 - 所以用户看到的都是一样的 - 差异性的内容交给客户端后续渲染 - 发生在next build 2. SSG: server static generation 服务端静态化 - SSG开启的页面，服务端会单独生成一个json文件 - `getStaticProps`: 渲染组件之前会运行 解决静态页面的问题 生成html+json - `getStaticPaths`: 渲染组件之前会运行 解决动态路由 什么时候使用静态化： 官方建议： 尽可能的使用静态化 如果页面不是根据不同的请求而不同，则使用静态化 3. SSR: server side render 服务端渲染 - 根据每一次请求获取数据 nextjs会判断页面有没有动态的内容, 来给页面静态化 开发模式是不会启动的