Taro Next.js SSR 插件
让 Taro H5 支持 Pre-rendering、SSR 和 ISR，极致的首屏速度 🚀，利于 SEO 🔍。
作为这个项目的创建者，我现在的工作已经和 Taro 开发无关，因而无法为其持续投入必要的精力进行维护。此刻，我正在寻找对此插件感兴趣且愿意进行贡献的热心者。如果你有热情并且对本项目感兴趣，请通过添加微信号：SharpYourMind 与我取得联系。
安装
你需要先有一个 Taro 项目，如果你还不知该如何创建一个 Taro 项目，请先从这里开始：Taro 安装及使用。
要安装和设置本插件，请运行：
npm init tarojs-plugin-platform-nextjs或者，你可以手动安装在你的 Taro 项目中安装本插件和 Next.js。
npm install next tarojs-plugin-platform-nextjs并在 Taro 项目的 config/index.js 中添加插件。
const config = {
plugins: [
'tarojs-plugin-platform-nextjs'
]
}使用
开发环境
npx taro build --type nextjs --watch生产环境
项目必须先使用以下命令进行编译：
npx taro build --type nextjs启动应用：
npx taro start -p 10086产出目录下是一个完整的 Next.js 应用，你也可直接使用 next 命令启动它：
npx next start dist -p 10086谁在使用
|
|
|
主要功能
Pre-rendering - 预渲染
插件默认 Pre-rendering 所有页面。这意味着提前为每个页面生成 HTML，而不是让浏览器端 JavaScript 完成所有工作。预渲染可以带来更好的性能和搜索引擎优化。
示例 - 房贷计算器
阅读 Next.js 文档了解更多：Pre-rendering。
SSR - 服务端渲染
在页面中导出 getServerSideProps 函数来使用 SSR 功能，插件将对每个请求使用 getServerSideProps 返回的数据预先渲染该页面。
export async function getServerSideProps(context) {
return {
props: {} // 将作为页面组件的属性
}
}示例 - Data Fetch Demo
阅读 Next.js 文档了解更多：getServerSideProps。
ISR - 增量静态生成
在页面导出 getStaticProps 函数并对其添加 revalidate 属性来使用 ISR 功能。
ISR 功能允许你单独对某个页面进行增量静态生成，无需重新生成整个网站。使用 ISR，你可以在数百万页面的规模上同时保留静态的好处。
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js 将尝试重新生成页面
// - 当接受到一个请求
// - 最多每 10 秒一次
revalidate: 10 // 单位为秒
}
}阅读 Next.js 文档了解更多：Incremental Static Regeneration。
自定义 Next.js 配置
可以在项目的 config 目录下添加 next.config.js 文件来自定义 Next.js 应用的相关配置。
如自定义 H5 应用的基本路径（basePath）：
module.exports = {
basePath: '/swan'
}阅读 Next.js 文档了解更多：next.config.js。
注意事项
功能限制
由于插件基于 Next.js 框架，故受其影响，有以下限制：
- 仅支持
browser路由模式。 - 组件级样式必须使用 CSS Module。
获取路由参数
Taro 有两种获取路由参数的方式，一种是调用方法 getCurrentInstance().router.params，另一种是使用 React Hook useRouter().params。
推荐使用 useRouter 来获取路由参数，因为它内部直接使用 Next.js 提供的 useRouter React Hook 实现，具有很好的一致性。
你仍可以使用 getCurrentInstance 方法，大多数情况它都会运行的很好。但明白插件是如何处理该方法，会让你避免遇到一些问题时不知所措。
当你在一个类组件中调用 getCurrentInstance 时，在编译阶段插件会在该组件外部使用 Next.js 的 withRouter 方法进行包装，让类组件能够响应 Next.js 路由的变化。
+ import {withRouter} from 'next/router'
class MyComponent extends Component {
$instance = getCurrentInstance()
render() {
console.log(this.$instance.router)
return null
}
}
- export default MyComponent
+ export default withRouter(MyComponent)插件配置
该插件支持以下配置项：
const config = {
plugins: [
['tarojs-plugin-platform-nextjs', {
// 当执行 taro build --type nextjs --watch 命令后，是否需要自动执行 next dev 命令
// 默认为 true
runNextjs: true,
// 是否启动后自动打开浏览器
// 默认为 true
browser: true,
// 在插件编译阶段需要复制到 Next.js 中的附加文件
// 作为示例，比如你本地编写的 postcss 插件目录
extraFiles: [
'postcss-plugins/**'
]
}]
]
}Taro 组件的 React 实现
Taro 官方的 H5 组件库是基于 Stencil 框架开发，为了更好的性能和兼容性，本项目使用完全基于 React 开发的 Taro 组件库 @taror/components。
参与建设
十分欢迎大家参与对插件问题的修复和功能的改进，如果你有任何问题，都可以在本项目的 issue 中进行提问！
本地编译
使用以下命令在本地编译插件
yarn install
yarn lerna run build架构设计
你可以通过阅读架构设计来了解本插件的工作原理。
贡献者
SyMind
|
zygoing
|
zengshide123
|
wpigdry
|