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.

[Sandip]

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 (
        <ServerSideData data={data} />
    )
}

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 (
        <Fragment>
            {hasMounted && <Card className="m-5">
                <Table bordered>
                    <thead>
                        <th>API</th>
                        <th>Description</th>
                        <th>Auth</th>
                        <th>Link</th>
                        <th>Category</th>
                    </thead>
                    <tbody>
                        {data.entries.slice(0, 10).map((item, index) => {
                            return (
                                <tr key={index}>
                                    <td>{item.API}</td>
                                    <td>{item.Description}</td>
                                    <td>{item.Auth}</td>
                                    <td>{item.Link}</td>
                                    <td>{item.Category}</td>
                                </tr>
                            )
                        })}
                    </tbody>
                </Table>
            </Card>}
        </Fragment>
    )
}

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.

[Gilbert Michael Jay Silmaro]

I tried @sandipthemes

[Sandip]

@GMJSilmaro We will add one API demo page asap, with free version, I hope that will work.