javascript - NextJS路由: why do there need to be different client and server routes?

标签 javascript reactjs express next.js

我对 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 网站“入门”教程(我自己输入代码并测试它)正在做的事情,但就路由而言,我有点迷失我'我在做什么以及为什么。显然,我在这里遗漏了一个关键的(也是基本的)元素,并且希望能提供有关我的方法错误的线索。

最佳答案

如果你看看路线

/blog/${slug}

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

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

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

关于javascript - NextJS路由: why do there need to be different client and server routes?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53872964/

相关文章:

javascript - 如何进一步减少 React 应用程序的包大小

javascript - 为什么我不能在 Express 的 app.use 上使用 Function.prototype.apply?

javascript - 使用nodejs和expressjs : What's a good way of passing . env到html而不使用模板?

javascript - 将 jQuery 事件添加到单个文本链接

javascript - 这是什么效果

javascript - 如何在右侧面板中显示子元素?

javascript - 如何在express、nodejs的所有 View 中传递csrf token

javascript - 在 Jest 测试中重置 ajax 模拟调用计数

javascript - Express.js 或 React.js 中的通用用户名/密码身份验证

javascript - React-Redux 子组件中的异步数据