Hi semuanya 👋🏼 disini saya akan memberikan tutorial bagaimana persist state Cookies di Next.js Server Side Rendering. Sebelum memulai saya asumsikan kamu mengerti basic Next.js

Prerequisite: React-hooks, Next.js SSR

• Init Next.js project dengan Create Next App CLI

yarn global add create-next-app
create-next-app my-app
cd my-app
yarn dev

Open browser favorit kamu dan pastikan semuanya berjalan dengan mulus. Disini saya hanya mengubah JSX di index.js

import React from 'react'

const Home = () => (
  <div>Hi Hashnode</div>
);

export default Home

React hooks

Disini kita bisa menggunakan useState untuk set value dari input. Untuk temen-temen yang terbiasa dengan approach state yang lama, boleh digunakan.

Basically ini cuma input check toggle true atau false

import React, { useState } from "react";

const Home = () => {
  const [rememberMe, setRememberMe] = useState(false);

  return (
    <div>
      remember me
      <input
        type="checkbox"
        value={rememberMe}
        checked={rememberMe}
        onChange={e => setRememberMe(e.target.checked)}
      />
    </div>
  );
};

export default Home;

mungkin banyak yang bertanya kenapa ga pakai localStorage aja? Alesannya karena ini Next.js SSR kita mau store data di server bukan di browser.

Buat kamu yang ingin menggunakan approach di localStorage di Next.js kamu bisa melakukannya setelah komponen sudah ke render

So gimana caranya? Pertama kita pastikan hanya checked input rememberMe berubah dengan menggunakan useEffect hooks. Jangan lupa untuk install module js-cookie di root project.

import React, { useState, useEffect } from "react";
import Cookie from "js-cookie";

const Home = () => {
  const [rememberMe, setRememberMe] = useState(false);

  useEffect(() => {
    Cookie.set("rememberMe", rememberMe);
  }, [rememberMe]);

  return (
    <div>
      remember me
      <input
        type="checkbox"
        value={rememberMe}
        checked={rememberMe}
        onChange={e => setRememberMe(e.target.checked)}
      />
    </div>
  );
};

export default Home;

Kalau buka developer tools ➡️ Application ➡️ Cookies, kamu bisa melihat hasil value rememberMe yang ke store di Cookie dari module js-cookie

Lalu gimana caranya Read Cookie di Server? Next.js punya special life cycle method namanya getInitialProps, ini memudahkan developer untuk initial props dari client side ke server side.

import React, { useState, useEffect } from "react";
import Cookie from "js-cookie";
import { parseCookies } from "../lib/parseCookies";

const Home = () => {
  const [rememberMe, setRememberMe] = useState(false);

  useEffect(() => {
    Cookie.set("rememberMe", rememberMe);
  }, [rememberMe]);

  return (
    <div>
      remember me
      <input
        type="checkbox"
        value={rememberMe}
        checked={rememberMe}
        onChange={e => setRememberMe(e.target.checked)}
      />
    </div>
  );
};

Home.getInitialProps = ({ req }) => {
  const cookies = parseCookies(req);
  return {
      initRememberMe: cookies.rememberMe
  };
};

export default Home;

disini kita punya akses request di getInitialProps. Untuk parseCookies sendiri, di next.js example ada parseCookies function.

// lib/parseCookies.js
import cookie from "cookie";

export function parseCookies(req) {
  return cookie.parse(req ? req.headers.cookie || "" : document.cookie);
}

getInitialProps sendiri untuk stateless function mudah didefinisikan sebagai berikut

SomePage.getInitialProps = () => {
  return {};
};

dan getInitialProps harus return objek otherwise kamu bakalan mendapatkan error.

untuk getInitialProps di class based component adalah sebagai berikut

import React from 'react'
export default class SomePage extends React.Component {
  static async getInitialProps() {
    return {}
  }
  render() {
    return <div>test</div>
  }
}

So how we get access and read from server side in next.js? Caranya sangat mudah.

kita punya akses getInitialProps melalu props di component itu sendiri.

import React, { useState, useEffect } from "react";
import Cookie from "js-cookie";
import { parseCookies } from "../lib/parseCookies";

const Home = ({ initRememberMe }) => {
  console.log("value: ", initRememberMe);
  const [rememberMe, setRememberMe] = useState(false);

  useEffect(() => {
    Cookie.set("rememberMe", rememberMe);
  }, [rememberMe]);

  return (
    <div>
      remember me
      <input
        type="checkbox"
        value={rememberMe}
        checked={rememberMe}
        onChange={e => setRememberMe(e.target.checked)}
      />
    </div>
  );
};

Home.getInitialProps = ({ req }) => {
  const cookies = parseCookies(req);
  return {
    initRememberMe: cookies.rememberMe
  };
};

export default Home;

Kalau kamu buka console next.js dan refresh page, kamu akan melihat value rememberMe di server side.

Selanjutnya, pass inital value di useState menjadi initRememberMe dengan initial function lalu parse menjadi JSON dan ketika set Cookie kita mengubahnya lagi menjadi string

const [rememberMe, setRememberMe] = useState(() =>
JSON.parse(initRememberMe));

useEffect(() => {
    Cookie.set("rememberMe", JSON.stringify(rememberMe));
  }, [rememberMe]);

Let’s see in action: kamu bisa mengecek hasilnya dengan membuka developer tools ➡️ Application ➡️ Cookies dan kamu bisa toggle input remember me dan bisa lihat hasilnya di Cookies.

GitHub: Github Repo

Itu saja tutorial dari saya tentang persist state dengan Cookies di Server Side Rendering Next.js

Cheers,

Salam dari Leipzig, Germany