@ fastify/ nextjs (英语)
反应服务器侧渲染支持 下一个.js 框架。 这个库是用来让一个已存在的Fastify服务器使用NextJS,而不是用来用Fastify替换NextJS的内部网络服务器.
安装
npm i @fastify/nextjs next react react-dom
使用量
由于Next.js在第一次发射时需要一些时间准备,你必须宣布你的路线 after 在您注册了插件后调用 .
插件将曝光 next API in Fastify 可以帮你处理渲染.
const fastify = require('fastify')()
fastify
.register(require('@fastify/nextjs'))
.after(() => {
fastify.next('/hello')
})
fastify.listen({ port: 3000 }, err => {
if (err) throw err
console.log('Server listening on http://localhost:3000')
})
您的服务器提供的所有页面必须保存在文件夹中 pages,正如你可以看到 Next.js 文档。 。 。 .
// /pages/hello.js
export default () => <div>hello world</div>
如果你需要通过 自定义选项 改为 next 只要通过它们注册为第二个参数.
fastify.register(require('@fastify/nextjs'), { dev: true })
如果你需要自己处理部分 只需回电给 next数字 :
fastify.next('/hello', (app, req, reply) => {
// your code
// `app` is the Next instance
app.render(req.raw, reply.raw, '/hello', req.query, {})
})
如果您需要从自定义处理器内切入 Next.js, 请使用 reply.nextRender
app.setErrorHandler((err, req, reply) => {
return reply.nextRender('/a')
})
如果您需要制作 Next.js 错误页面,请使用 reply.nextRenderError
app.setErrorHandler((err, req, reply) => {
return reply.status(err.statusCode || 500).nextRenderError(err)
})
如果您需要处理 Head 路由, 您可以定义 HTTP 方法 :
fastify.next('/api/*', { method: 'GET' });
fastify.next('/api/*', { method: 'HEAD' });
服务资产
默认的插件处理路由 ${basePath}/_next/* 并转至Next.js.
如果您有自定义预处理 _next/* 请求中,您可以防止此处理 noServeAssets: true 插件选项的属性 :
fastify
.register(require('@fastify/nextjs'), {
noServeAssets: true
})
.after(() => {
fastify.next(`${process.env.BASE_PATH || ''}/_next/*`, (app, req, reply) => {
// your code
app.getRequestHandler()(req.raw, reply.raw).then(() => {
reply.hijack()
})
})
})
压低
插件包含 压低,可以通过提供 underPressure 属性到插件选项.
使用 under-pressure 允许执行一个断路器,在健康指标没有得到遵守时返回出错.
因为React服务器侧渲染是针对Node.js服务器的屏蔽操作,向客户端还原出一个错误,允许信号显示服务器负荷过大.
现有备选方案与接受的备选方案相同 under-pressure。 。 。 .
例如:
fastify.register(require('@fastify/nextjs'), {
underPressure: {
exposeStatusRoute: true
}
})
-
underPressure- 说吧bool|object- 当虚伪的时候,
under-pressure未注册 - 当真理降临的时候,
under-pressure以默认选项注册 - 当它是一个物体的时候,
under-pressure以提供的选项注册
- 当虚伪的时候,
在请求对象上自定义属性
如果您想共享自定义对象( 例如其它自定义插件实例 - 例如, @ fastify/redis) , 您可以在服务器/ 客户端之间与每个页面请求共享, 请使用 onRequest 钩子将其添加到请求对象中.
以下是如何做到这一点的例子:
const Fastify = require('fastify')
const FastifyRedis = require('@fastify/redis')
const FastifyNextJS = require('@fastify/nextjs')
const fastify = Fastify()
fastify.register(FastifyRedis, { host: '127.0.0.1' })
fastify.register(FastifyNextJS)
fastify.register(function(instance) {
// for performance reasons we do not want it to run on every request
// only the nextjs one should run
instance.addHook('onRequest', function(request, reply, done) {
// define a custom property on the request
request.raw.customProperty = { hello: "world" }
// OR make the instance of @fastify/redis available in the request
request.raw.redisInstance = instance.redis
done()
})
instance.next('/', function(app, request, reply) {
// your custom property containing the object will be available here
// request.raw.customProperty
// OR the redis instance
// request.raw.redisInstance
app.render(request.raw, reply.raw, '/hello', request.query, {})
})
}, { prefix: '/hello' })
在上述例子中,我们创造了 customProperty 财务报告和审定财务报表 redisInstance 可以在向服务器提出的每个请求中访问。 在客户端,可以像这个例子一样访问:
const CustomPropPage = ({ cp, ri }) => <div>custom property value: {cp} | redis instance: {ri}</div>;
export default CustomPropPage;
export const getServerSideProps = async function (ctx) {
return {
props: {
cp: ctx.req.customProperty,
ri: ctx.req.redisInstance,
}
};
};
插件超时和 Next.js 开发模式
Fastify中插件的默认超时为1000ms,这对巨大的Next.js Projects来说可能是一个问题,因为其初始建设时间高于此. 通常,你会遇到这样的错误:
Error: ERR_AVVIO_PLUGIN_TIMEOUT: plugin did not start in time: /app/node_modules/@fastify/nextjs/index.js. You may have forgotten to call 'done' function or to resolve a Promise
工作或固定是增加插件超时 :
const isDev = process.env.NODE_ENV !== 'production';
const fastify = Fastify({ pluginTimeout: isDev ? 120_000 : undefined });
发展
CI目前运行npm@6,所以在升级软件包时,请使用这个版本.
鸣谢
这个项目由下列各方慷慨赞助:
过去提案国:
- 莱兹
许可证
许可证根据 麻省理工学院。 。 。 .