1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/pass-server-data/README.md
Chris 7afc008aa7 Example: Passing data from server through API (#2594)
* Add example on how to pass data through js api during SSR

Requested in #1117

* Use content negotiation instead of a separate route

* Codereview feedback

* Move security related test cases into a its own file.

* Removes the unused renderScript function

* Add a nerv example. (#3573)

* Add a nerv example.

* Fix for indentation/style

* Fix for name
2018-02-03 17:11:47 +01:00

1.9 KiB

Deploy to now

Pass Server Data Directly to a Next.js Page during SSR

How to use

Download the example or clone the repo:

curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/pass-server-data
cd pass-server-data

Install it and run:

npm install
npm run dev

Deploy it to the cloud with now (download)

now

The idea behind the example

If you already have a custom server which has local data (for instance cached data from an API call, or data read from a file at startup) that you wish to make available in the Next.js page, you can pass that data in the query parameter of nextApp.render().

This is not the only way to pass data. You could also expose an endpoint and make a fetch() call to localhost, or you could import server-side code with eval (necessary to prevent webpack from trying to package your server code). However both solutions leave something to be desired in either performance or elegance.

This example shows the express server at server.js reading in a file at load time with static data (this could also have been data cached from an API call) in operations/get-item.js. It has two routes: a home page, and an item page. The item page uses data from the get-item operation, passed as a query parameter in routes/item.js.

We use this data in pages/item.js if rendered server-side, or make a fetch request if rendered client-side. The server knows whether or not to use next.js to render the route based on the Accept header, which will be application/json when we fetch client-side.

Take a look at the following files:

  • server.js
  • routes/item.js
  • pages/item.js
  • operations/get-item.js