# nextjs-blog

**Repository Path**: ldlw/nextjs-blog

## Basic Information

- **Project Name**: nextjs-blog
- **Description**: nextjs重构博客
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-05
- **Last Updated**: 2024-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目集成

## 1. 集成 tailwindcss

https://article.juejin.cn/post/7241990416987832357#heading-7

# 2. 预渲染

## 1. 静态化

发生的时间：next build

1). 纯静态化
2). ssg: server static generator
getStaticProps: 当渲染组件之前会运行 生成 html + json
getStaticpaths：当渲染组件之前会运行 解决动态路由

fallback:
false 什么都不做 如果没有静态页面 返回 404
true 会给[id].html

当访问到不存在的 id 页面时

1. 响应[id].html 页面中会请求 JSON
2. 重新运行 getStaticProps 并将新的 id 传过去
3. 重新渲染组件 把渲染结果生成到一个新的 html 中
4. 同时生成 json

什么时候使用静态化：
如果你的页面不是根据不同的请求而不同 则推荐使用静态化(文章详情 文档说明 公司地址)

## 2. SSR: sever side render 服务端渲染

列表页频繁变动

getServerSideProps(context)

# 3. 金丝雀版本
9.0.3版本 首页getStaticProps多次执行
1. 安装 next@canary
2. 修改 axios基础路径 不再使用代理
3. 准备登录接口并完成测试

# 4. prerender
任何csr技术开发应用程序 不限框架
白屏 seo

静态资源服务器    5000端口
prerender服务器  6000端口
客户端 -> prerender 6000 -> 5000
localhost:6000/render?url=localhost:5000
nginx配置 区分用户和蜘蛛
github.com/prerender/prerender#readme