如何在 Next.js 中重新查询数据

Question

I just started learning Next.js and I'm having some issues with querying data.

I understand that getInitialProps is used to query an API and get the data, and it's rendering on the server.

I want a search box where the user search, and as they type, it repeatedly queries the API in a function and stores the results in state, but server-side.

• How can I handle this so it renders on the server and not the client like getInitialProps does?
• Is there something special I need to do in my function to make it run on the server?
• Should I just recall getInitialProps and pass in the search term?
• What's the best way to get the search query to render on the server and not the client?

Answer 1

There is no way to make this dynamic (as user types in) search on the server. This needs to be handled on UI as per docs

For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the Link component or using the routing APIs.

The only search that will be prerendered on the server is the one that reloads that page.

Example

<form action="/search-enpoint">
  <input name="search" type="text" placeholder="Search" />

  <button>Find</button>
</form>

This form will be submitted to /search-enpoint?search=qwe that you can catch in custom server

// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

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

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;

    if (pathname === '/search-enpoint') {
      app.render(req, res, '/index', query);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, err => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

But again this search is not dynamic.

Hope this helps.