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

Question

I'm somewhat new to React, but wholly new to NextJS, which I'm trying to teach myself. I've been going through the NextJS 'getting started' tutorial, as well as looking at some other tutorials. I don't understand why there is a need to distinguish between client routes and routes on the server, that is, why the client route given as an example uses a query, whereas the server route does not. I know that I am not seeing the forest for the trees, so if anyone can point me in the right direction of 'grokking' NextJS routes, I'd appreciate it.

From this tutorial, on the client side we might have

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

which requires us (it would seem) to set up an Express server and handle the route

/blog/:slug

OK. But why? Why isn't the local link simply

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

? Or, alternatively, why doesn't NextJS handle server-side the route /blog?slug=${slug} ?

I can follow what the NextJS site 'getting started' tutorial (I input the code myself and test it) is doing, but as far as routing I am a bit lost as to what I'm doing and why . Clearly I am missing a crucial (and elementary) element here, and would appreciate clues as to the error of my ways.

Answer 1

If you look at the route

/blog/${slug}

Here slug can take different values as it a parameter. If you want NextJs to handle such routes you need to implement a route for each value that slug can take. For example.

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

And this number can grow very quickly. Hence we use an Express server so that we can intercept request to route /blog and pass slug as parameter to the blog page.

Answer 2

You do not need different client and server routes. That is not compulsory unless you are using client-side routing explained here , with dynamic routes. If you do not want to use that you can switch for server-side routing with our old friend <a> which does not require separate links.

NextJS handles server-side route queries. Below is a simple example for that -

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

In above example, when you open page - /dashboard?username=amit , you can get the value passed in URL query in your page which you can retrieve using - getInitialProps function. To get data from URL query with server-side routing, you must create your page with getInitialProps function. Example is as below --

Dashboard.getInitialProps = async(ctx)  => {

    const query = ctx.query;

    const username = query.username;

    return {"username": username};

}

Above code sends data from url query as page props. Server returns that data to the page in req .

Now you must create _app page with getInitialProps function to make this work.