NextJS 路由：为什么需要不同的客户端和服务器路由？答案

【问题标题】：NextJS routing: why do there need to be different client and server routes?NextJS 路由：为什么需要不同的客户端和服务器路由？
【发布时间】：2019-05-21 05:28:44
【问题描述】：

我对 React 有点陌生，但对 NextJS 完全陌生，我正在尝试自学。我一直在阅读 NextJS 的“入门”教程，以及查看其他一些教程。我不明白为什么需要区分客户端路由和服务器上的路由，也就是说，为什么作为示例给出的客户端路由使用查询，而服务器路由没有。我知道我不是只见树木不见森林，所以如果有人能指出我“探索”NextJS 路线的正确方向，我将不胜感激。

来自this 教程，在客户端我们可能有

<Link href={`/blog?slug=${slug}`} as={`/blog/${slug}`} prefetch>
  ...
</Link>

这需要我们（看起来）设置一个 Express 服务器并处理路由

/blog/:slug

好的。但为什么？为什么本地链接不简单

<Link href={`/blog/${slug}`}  prefetch>
      ...
    </Link>

？或者，为什么 NextJS 不处理服务器端路由 /blog?slug=${slug} ？

我可以按照 NextJS 网站的“入门”教程（我自己输入代码并测试它）正在做什么，但就路由而言，我对 what 我有点迷茫我在做什么以及为什么。显然，我在这里遗漏了一个关键（和基本）元素，并且希望能提供有关我的方式错误的线索。

【问题讨论】：

标签： javascript reactjs express next.js

【解决方案1】：

您不需要不同的客户端和服务器路由。这不是强制性的，除非您使用带有动态路由的客户端路由explained here。如果您不想使用它，您可以使用我们的老朋友<a> 切换到服务器端路由，不需要单独的链接。

NextJS 处理服务器端路由查询。下面是一个简单的例子 -

server.get("/dashboard", (req, res) => {
    const actualPage = '/dashboard';
    const queryParams = {
        username: req.query.username
    };
    app.render(req, res, actualPage, queryParams);
  });

在上面的示例中，当您打开页面 - /dashboard?username=amit 时，您可以在页面中获取 URL 查询中传递的值，您可以使用 - getInitialProps 函数检索该值。要使用服务器端路由从 URL 查询中获取数据，您必须使用 getInitialProps 函数创建页面。示例如下--

Dashboard.getInitialProps = async(ctx)  => {

    const query = ctx.query;

    const username = query.username;

    return {"username": username};

}

以上代码将来自 url 查询的数据作为页面道具发送。服务器将该数据返回到req 中的页面。

现在您必须使用getInitialProps 函数创建_app page 才能使这项工作正常进行。

【讨论】：

【解决方案2】：

如果你看路线

/blog/${slug}

这里 slug 可以将不同的值作为参数。如果您希望 NextJs 处理此类路由，您需要为 slug 可以采用的每个值实现一个路由。例如。

/blog/slug1
/blog/slug2
/blog/slug3

而且这个数字会增长得非常快。因此，我们使用 Express 服务器，以便我们可以拦截路由 /blog 的请求，并将 slug 作为参数传递给 blog 页面。

【讨论】：