Server Side Components

[anthonyrfarias]

Hello there,

I'm trying this template, i dont see any docs on how to use server components. I would like to make requests from the server instead of the client. I can see all components are client components so all of my requests are executed by the browser, which makes thing very slow.

Is there anyway to achieve this?

Thanks in advanced.

[sandipthemes]

Hi @anthonyrfarias

By default all the components of Nextjs are Server component, we have added 'use client' directive to make it client component. If you want to use hooks on the page you have to make it client component.

Now if you want to use any request from the server to populate data, you can follow below steps.

1. Create a folder named server ( You can name anything ) and create a page named page.js at this location : app/(dashboard)/pages/server/page.js
2. Copy below code in page.js file

   
   import ServerSideData from './ServerSideData'

async function getServerData() { let data = await fetch('https://api.publicapis.org/entries', { cache: 'no-store' }) data = await data.json(); return data; }

export default async function Page() { const data = await getServerData(); return (

)

}

4. Create new page at this location :  app/(dashboard)/pages/server/ServerSideData.js
5. Copy below code in ServerSideData.js file

'use client';

// import node module libraries import { Fragment } from "react"; import { Card, Table } from "react-bootstrap";

// import hooks import useMounted from 'hooks/useMounted';

const ServerSideData = ({ data }) => { const hasMounted = useMounted(); return (

{hasMounted && {data.entries.slice(0, 10).map((item, index) => { return ( ) })}

API	Description	Auth	Link	Category
{item.API}	{item.Description}	{item.Auth}	{item.Link}	{item.Category}

}

)

}

export default ServerSideData

7. Now execute http://localhost:3000/pages/server at your local server, you will get all data in tabular format from the server ( i.e. a free 3rd party API data ). Now you can play with this server data to incorporate in any UI as per your need.

I hope it will solve your issue.