Concepts

Learn some of the core concepts of fullstack-components.

Getters vs fetchers

All library functionality includes one or more getters and fetchers, as prefixed by get and fetch respectively. The difference between the two is where they can be used, and where third-party API requests are made.

server vs client:

getters can only be used on the server.
fetchers can only be used on the client.

Getters: Server

Getters are Server Actions that call third-party APIs directly on the server. This avoids calling the Next.js API route handler and reduces the back-and-forth communication between client and server.

Use getters to make Server Components and other server functionality.

'use server'
Third-party API requests only
Imported from the library root

Getter import example

import { getPrompt } from '@trikinco/fullstack-components'

Fetchers: Client

Fetchers are asynchronous functions that call the internal Next.js API route handler, then the third-party APIs.

Use fetchers to make Client Components and other browser functionality.

'use client'
Internal Next.js API request, then third-party API requests
Imported from the /client directory

Fetcher import example

import { fetchPrompt } from '@trikinco/fullstack-components/client'