Next.js 使用自定义快递服务器重新呈现所有自定义路由

Question

我在 server.js 中设置了一个自定义快递服务器，就像 Next.js 的文档给出了一个 example of，但是，每次我导航到那里定义的任何动态路由时，有一个应用程序的重新渲染，包括其中包含我的样式，导致非常糟糕的无样式内容闪现。有没有办法确保动态路由不会触发重新渲染？

这是我的 server.js 文件：

const express = require("express");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app
    .prepare()
    .then(() => {
        const server = express();

        server.get("/press/:slug", (req, res) => {
            const actualPage = "/press";
            const queryParams = { slug: req.params.slug, apiRoute: "press" };
            return app.render(req, res, actualPage, queryParams);
        });

        server.get("/locations/:slug", (req, res) => {
            const actualPage = "/locations/location";
            const queryParams = { slug: req.params.slug, apiRoute: "location" };
            return app.render(req, res, actualPage, queryParams);
        });

        server.get("/insights/:slug", (req, res) => {
            const actualPage = "/insights/insight";
            const queryParams = { slug: req.params.slug, apiRoute: "insight" };
            return app.render(req, res, actualPage, queryParams);
        });

        // server.get("/_preview/:id/:wpnonce", (req, res) => {
        //     const actualPage = "/preview";
        //     const queryParams = { id: req.params.id, wpnonce: req.params.wpnonce };
        //     app.render(req, res, actualPage, queryParams);
        // });

        const robotsOptions = {
            root: __dirname + '/static/',
            headers: {
                'Content-Type': 'text/plain;charset=UTF-8',
            }
        };
        server.get('/robots.txt', (req, res) => (
            res.status(200).sendFile('robots.txt', robotsOptions)
        ));

        const sitemapOptions = {
            root: __dirname + '/static/',
            headers: {
                'Content-Type': 'text/xml;charset=UTF-8',
            }
        };
        server.get('/sitemap.xml', (req, res) => (
            res.status(200).sendFile('sitemap.xml', sitemapOptions)
        ));

        server.get("*", (req, res) => {
            return handle(req, res);
        });

        server.listen(3000, err => {
            if (err) throw err;
            console.log("> Ready on http://localhost:3000");
        });
    })
    .catch(ex => {
        console.error(ex.stack);
        process.exit(1);
    });

Answer 1

你的 href 应该是 as 属性。根据文档重建你的 href 属性看看 nextjs 文档 https://nextjs.org/docs#with-link

Next.js 使用自定义快递服务器重新呈现所有自定义路由

Next.js with custom express server re-renders all custom routes

javascript

reactjs

express

next.js