A custom server can help when an app needs custom request handling or authentication, and a standalone server may cost less for some workloads. But it gives up serverless API routes and automatic static optimization. Robinson estimates that about 95 percent of Next.js use cases can avoid a custom server.
Fetching Data
Lee Robinson, developer and creator of Learn Next.js at leerob, explains data fetching in Next.js, from API routes and client-side libraries to GraphQL, Hasura, and Apollo Client.
API routes are files under `pages` that handle requests and responses, with helpers for reading cookies, query parameters, and request bodies and returning JSON. Dynamic routes such as `/api/users/[id]` can return a specific user or query a database. For client-side data that can load after the page, SWR fetches and revalidates responses, helping keep pages statically served.
GraphQL lets clients request specific fields, including nested data, with queries for reading and mutations for changing data. Hasura builds a GraphQL API over Postgres and generates CRUD mutations from table models. Robinson demonstrates creating tables, querying and filtering rows, and joining related deals and locations in the Day Drink app.
The Day Drink app uses Apollo Client to query deals by day and retrieve related users, active days, and locations. Apollo also supports mutations and a cache; after adding a deal, the app updates cached query results directly so the new deal appears without another database request. Robinson also shows fetching location and city data for display and possible map use.
Takeaways
- Keep a custom server only when the app needs its request handling or has a clear cost reason; API routes preserve serverless deployment and static optimization.
- Use client-side fetching for noncritical data when serving a static page matters; SWR can refresh data as it becomes stale.
- GraphQL queries can limit responses to needed fields and retrieve related data together.
- Hasura can generate CRUD mutations from Postgres models, reducing the work of building a GraphQL API.
- Apollo’s cache can be updated after a mutation to show new data without refetching the same query.
Mentioned in this talk
Search inside this talk
What was claimed 7
- feature
Next.js: API routes
“Serverless functions, which we'll use via API routes”
YouTube Unverified1 source· Talk
- integrates withApollo GraphQL client integrates with GraphQL
“The Apollo Client will be able to make those requests for you, cache that data”
9:02inState Management & MoreYouTube Verified2 sources· Talk
- uses
“This is made by Zeit, who also makes Next.js and Now.”
YouTube Unverified1 source· Talk
- integrates with
“build this real-time GraphQL database using PostgreSQL”
YouTube Unverified1 source· Talk
- featureHasura: Auto-generates CRUD mutations for defined data models
“Hasura is going to make the CRUD (create, read, update, delete) mutations for me”
YouTube Unverified1 source· Talk
- uses
“how we can accomplish it using Apollo”
YouTube Unverified1 source· Talk
- featureApollo GraphQL client: Caches query data and supports mutations, batching, and linking multiple GraphQL databases
“making mutations, getting that data back and holding it in a cache, batching calls”
YouTube Unverified1 source· Talk
Related talks
14:29
25:41
16:24
9:32
26:10
6:35