Relay modern: SSR and next.js

Photo by Michał Parzuchowski on Unsplash

TL;DR

How to read this article

Working with the example

The next.js approach

The universal approach

Table of contents

Introduction

Server side rendering

Issues with Relay

Checking the HTML recieved from server

A basic Relay app

git clone https://github.com/yashmahalwal/relay-ssr.git
NEXT_PUBLIC_GITHUB_TOKEN=Your github personal token

1. A barebones example

g̶i̶t̶ ̶c̶h̶e̶c̶k̶o̶u̶t̶ ̶7̶2̶7̶7̶9̶2̶5̶6̶a̶e̶2̶3̶8̶5̶5̶3̶e̶1̶2̶d̶b̶f̶9̶6̶d̶8̶5̶7̶2̶2̶f̶6̶7̶6̶a̶9̶a̶e̶6̶f̶# Update May 2021
git checkout 39ea3600b413b006083def72055e37a7ec0e96d3
query pagesQuery {
viewer {
login
}
}
The username query
Server rendered markup

Observations

output of npm ls command

Next steps

2. Data availability — the next.js way

g̶i̶t̶ ̶c̶h̶e̶c̶k̶o̶u̶t̶ ̶4̶2̶d̶c̶8̶e̶6̶9̶0̶b̶1̶6̶3̶c̶1̶c̶8̶c̶2̶4̶d̶8̶a̶6̶5̶4̶f̶e̶1̶0̶5̶a̶6̶6̶3̶d̶6̶7̶0̶e̶# Update May 2021
git checkout 24a791bb1b0fccc5d34593f0d1039f27013ca549
Server side rendered markup
No loading on hydration

Next Steps

3. Data availability — the universal way

̶g̶i̶t̶ ̶c̶h̶e̶c̶k̶o̶u̶t̶ ̶7̶f̶f̶3̶5̶0̶f̶8̶5̶a̶5̶c̶d̶0̶7̶c̶8̶f̶a̶2̶b̶e̶9̶e̶4̶9̶7̶c̶9̶e̶8̶0̶a̶6̶0̶4̶4̶0̶c̶5̶# Update May 2021
git checkout 2859e177b10add4dfdce7e836113b72c4e793a1f
npm i react-relay-network-modern react-relay-network-modern-ssr

Custom document

Initial Environment

First render

Second render

Custom App

Observations

Server side generated markup : Page loaded with JS disabled
No loading indicator on hydration : Page loaded with JS enabled

Conclusion

Looking for job opportunities. CSE Undergrad @NIT Bhopal | Analyst Intern @ American Express | All things Web

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store