Pass a server-side prop to a client-side component – Server-side

The Problem:

In a Next.js 13 application, you want to pass a server-side variable into a client-side component. Specifically, you aim to pass a variable named ‘x’ from the server-side ‘Home’ function into a client-side component called ‘Props’. You’ve set up a server-side code that defines the ‘x’ variable and returns the ‘Props’ component with the ‘data’ prop set to the ‘x’ variable. On the client side, you have a ‘Props’ component that receives the ‘data’ prop and logs it to the console. However, when you run the application, you encounter an error indicating ‘Unexpected token u in JSON at position 0’. Your goal is to determine the correct approach to pass the server-side ‘x’ variable to the client-side ‘Props’ component and resolve the error.

The Solutions:

Solution 1: Server-side serialization for data transfer

To pass a server-side prop to a client-side component, it must be serializable. Serialization is the process of converting the prop into a format that can be transferred over the network. JavaScript Object Notation (JSON) is commonly used for data serialization.

To convert a prop to JSON, use the JSON.stringify() method on the server side while passing the prop to the client-side component. On the client side, use the JSON.parse() method to convert the received JSON string back to a valid object.

Example:

// Server-side code
import Props from "./Components/props";

export default function Home() {
  const x = "hello";

  // Convert the 'x' variable to JSON
  const xJSON = JSON.stringify(x);

  return (
    <main>
      {/* Passing the JSON string to the client-side component */}
      <Props data={xJSON} />
      <p>Hello</p>
    </main>
  );
}

// Client-side code
import Props from "./Components/props";

"use client";

export default function Props({ data }) {
  // Convert the received JSON string back to an object
  const x = JSON.parse(data);

  console.log(x);

  return <p>Test</p>;
}

Solution 2: getServerSideProps

When you need to pass data from the server-side to the client-side, you can use the getServerSideProps function. This function returns an object containing a key-value pair of the data you want to pass to the client-side. This data will be accessible to you via the props object in your client-side component.

Here’s how you can implement this solution:

Server-Side

export const getServerSideProps = async () => {
  const x = 'hello';
  return {
    props: {
      x,
    },
  };
};

Client-Side

export const Home = async (props) => {
  console.log(props.x); // logs 'hello'
};

Video Explanation: