Loading Data

Dynamically loading data from the server is why getServerSideProps was added to Next.js. We build upon that to add a more rich feature set. But let start with the basics first.

The standard method that you might already be familiar with, looks something like this:

export const getServerSideProps = async () => {
  return { props: { name: 'smeijer' } };
};

#

handle » get

To make next-runtime handle this page route, simply wrap it with our handle util. By adding it on the page level, we only process requests to those specific paths. All other pages are unaffected by your change.

import { handle } from 'next-runtime';

export const getServerSideProps = handle({
  async get() {
    return { props: { name: 'smeijer' } };
  },
});

That's it, your page works as before, except it also serves as json api for GET requests. We'll come back to that.

Just for convenience, we ship a json util that removes the need to wrap props in props. I mean, do we ever not return props?

import { handle, json } from 'next-runtime';

export const getServerSideProps = handle({
  async get() {
    return json({ name: 'smeijer' });
  },
});

How's that? As already briefly mentioned, by defining the handler inside our handle method, we not only serve the page component it's initial props, but this route now also supports json request. Give it a shot and request this same page with the browser, and curl or postman. Amazing, right?

curl -H "Accept: application/json" http://example.com/page-path
# » { name: 'smeijer' }