entry-server.tsx

`entry-server.tsx` is where your app starts on the server.

tsx
import { createHandler(alias) function createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler, renderAsync(alias) function renderAsync(fn: (context: PageEvent) => JSX.Element, options?: {
    timeoutMs?: number;
    nonce?: string;
    renderId?: string;
}): () => MiddlewareFn
import renderAsync, StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer } from "solid-start/entry-server";
 
export default createHandler(alias) createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler(renderAsync(alias) renderAsync(fn: (context: PageEvent) => JSX.Element, options?: {
    timeoutMs?: number | undefined;
    nonce?: string | undefined;
    renderId?: string | undefined;
} | undefined): () => MiddlewareFn
import renderAsync(event(parameter) event: PageEvent => <StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer event(property) event: PageEvent={event(parameter) event: PageEvent} />));

tsx
import { createHandler(alias) function createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler, renderAsync(alias) function renderAsync(fn: (context: PageEvent) => JSX.Element, options?: {
    timeoutMs?: number;
    nonce?: string;
    renderId?: string;
}): () => MiddlewareFn
import renderAsync, StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer } from "solid-start/entry-server";
 
export default createHandler(alias) createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler(renderAsync(alias) renderAsync(fn: (context: PageEvent) => JSX.Element, options?: {
    timeoutMs?: number | undefined;
    nonce?: string | undefined;
    renderId?: string | undefined;
} | undefined): () => MiddlewareFn
import renderAsync(event(parameter) event: PageEvent => <StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer event(property) event: PageEvent={event(parameter) event: PageEvent} />));

Usage
Rendering your application
Reference
renderAsync(codeFn, options)
renderStream(codeFn, options)
renderSync(codeFn, options)
<StartServer event={event} />
createHandler(...middlewareFn)

Usage

Rendering your application

This file does one thing. It starts your SolidStart application on the server. It does so by passing in our <StartServer> to a "render" function. SolidStart provides three:

renderSync
renderAsync
renderStream

Respectively, each wraps Solid's rendering methods of rendering to a:

string
Promise
ReadableStream

createHandler allows a mechanism for introducing middleware into our server rendering. See our Middleware Guide for more information.

Reference

`renderAsync(codeFn, options)`

Middleware that calls Solid's renderToStringAsync under the hood. This asynchronously renders the application and responds when the page has fully been loaded and rendered. All Suspense and data loading on initial load happens on the server.

tsx
import { createHandler(alias) function createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler, renderAsync(alias) function renderAsync(fn: (context: PageEvent) => JSX.Element, options?: {
    timeoutMs?: number;
    nonce?: string;
    renderId?: string;
}): () => MiddlewareFn
import renderAsync, StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer } from "solid-start/entry-server";
 
export default createHandler(alias) createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler(renderAsync(alias) renderAsync(fn: (context: PageEvent) => JSX.Element, options?: {
    timeoutMs?: number | undefined;
    nonce?: string | undefined;
    renderId?: string | undefined;
} | undefined): () => MiddlewareFn
import renderAsync(event(parameter) event: PageEvent => <StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer event(property) event: PageEvent={event(parameter) event: PageEvent} />));

tsx
import { createHandler(alias) function createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler, renderAsync(alias) function renderAsync(fn: (context: PageEvent) => JSX.Element, options?: {
    timeoutMs?: number;
    nonce?: string;
    renderId?: string;
}): () => MiddlewareFn
import renderAsync, StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer } from "solid-start/entry-server";
 
export default createHandler(alias) createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler(renderAsync(alias) renderAsync(fn: (context: PageEvent) => JSX.Element, options?: {
    timeoutMs?: number | undefined;
    nonce?: string | undefined;
    renderId?: string | undefined;
} | undefined): () => MiddlewareFn
import renderAsync(event(parameter) event: PageEvent => <StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer event(property) event: PageEvent={event(parameter) event: PageEvent} />));

`renderStream(codeFn, options)`

Middleware that calls Solid's renderToStream under the hood. This asynchronously renders the application and starts responding as soon as it can. All Suspense and data loading on initial load happens on the server. This method is probably the most desired approach in many cases.

However, it requires client-side JavaScript enabled and consideration of when status and head meta tags are available as once streaming has begun they cannot be updated from the server. This requires careful usage of the deferStream option of our Resources(createRouteData, createServerData$, createResource).

tsx
import { createHandler(alias) function createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler, renderStream(alias) function renderStream(fn: (context: PageEvent) => JSX.Element, baseOptions?: {
    nonce?: string | undefined;
    renderId?: string | undefined;
    onCompleteShell?: ((info: {
        write: (v: string) => void;
    }) => void) | undefined;
    onCompleteAll?: ((info: {
        write: (v: string) => void;
    }) => void) | undefined;
}): () => MiddlewareFn
import renderStream, StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer } from "solid-start/entry-server";
 
export default createHandler(alias) createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler(renderStream(alias) renderStream(fn: (context: PageEvent) => JSX.Element, baseOptions?: {
    nonce?: string | undefined;
    renderId?: string | undefined;
    onCompleteShell?: ((info: {
        write: (v: string) => void;
    }) => void) | undefined;
    onCompleteAll?: ((info: {
        ...;
    }) => void) | undefined;
}): () => MiddlewareFn
import renderStream(event(parameter) event: PageEvent => <StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer event(property) event: PageEvent={event(parameter) event: PageEvent} />));

tsx
import { createHandler(alias) function createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler, renderStream(alias) function renderStream(fn: (context: PageEvent) => JSX.Element, baseOptions?: {
    nonce?: string | undefined;
    renderId?: string | undefined;
    onCompleteShell?: ((info: {
        write: (v: string) => void;
    }) => void) | undefined;
    onCompleteAll?: ((info: {
        write: (v: string) => void;
    }) => void) | undefined;
}): () => MiddlewareFn
import renderStream, StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer } from "solid-start/entry-server";
 
export default createHandler(alias) createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler(renderStream(alias) renderStream(fn: (context: PageEvent) => JSX.Element, baseOptions?: {
    nonce?: string | undefined;
    renderId?: string | undefined;
    onCompleteShell?: ((info: {
        write: (v: string) => void;
    }) => void) | undefined;
    onCompleteAll?: ((info: {
        ...;
    }) => void) | undefined;
}): () => MiddlewareFn
import renderStream(event(parameter) event: PageEvent => <StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer event(property) event: PageEvent={event(parameter) event: PageEvent} />));

`renderSync(codeFn, options)`

Middleware that calls Solid's renderToString under the hood. This synchronously renders the application and responds immediately. All Suspense and data loading on initial load is deferred to the browser. Probably not recommended unless you do not wish to load data from the server for some specific reason.

tsx
import { createHandler(alias) function createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler, renderSync(alias) function renderSync(fn: (context: PageEvent) => JSX.Element, options?: {
    nonce?: string;
    renderId?: string;
}): () => MiddlewareFn
import renderSync, StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer } from "solid-start/entry-server";
 
export default createHandler(alias) createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler(renderSync(alias) renderSync(fn: (context: PageEvent) => JSX.Element, options?: {
    nonce?: string | undefined;
    renderId?: string | undefined;
} | undefined): () => MiddlewareFn
import renderSync(event(parameter) event: PageEvent => <StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer event(property) event: PageEvent={event(parameter) event: PageEvent} />));

tsx
import { createHandler(alias) function createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler, renderSync(alias) function renderSync(fn: (context: PageEvent) => JSX.Element, options?: {
    nonce?: string;
    renderId?: string;
}): () => MiddlewareFn
import renderSync, StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer } from "solid-start/entry-server";
 
export default createHandler(alias) createHandler(...exchanges: Middleware[]): (event: FetchEvent) => Promise<Response>
import createHandler(renderSync(alias) renderSync(fn: (context: PageEvent) => JSX.Element, options?: {
    nonce?: string | undefined;
    renderId?: string | undefined;
} | undefined): () => MiddlewareFn
import renderSync(event(parameter) event: PageEvent => <StartServer(alias) function StartServer({ event }: {
    event: PageEvent;
}): JSX.Element
import StartServer event(property) event: PageEvent={event(parameter) event: PageEvent} />));

Parameters

codeFn (function): function that executes the application code.
mountEl (Node | Document): element to mount the application to.

`<StartServer event={event} />`

Component that wraps our application root. It includes Context providers for Routing and MetaData. It takes the Event object that originates from our underlying runtime that includes information:

PageEvent

request: Request: The current request.
responseHeaders: Headers: The headers being built for the response.
clientAddress: string: The IP address of the remote client.
locals: Record<string, unknown>: An object for storing local data that lives the life of the request, like user or authentication data.
setStatusCode(code: number): Sets the status code.
getStatusCode(): Returns the current status code.
fetch(url: string, init: RequestInit): Fetch API that can call API helpers directly on the server.

`createHandler(...middlewareFn)`

Registers custom middleware around handling the server request by registering middleware functions that have the signature:

tsx
type MiddlewareFn = (event: FetchEvent) => Promise<Response> | Response;
function MyMiddleware({ forward }: { forward: MiddlewareFn }): MiddlewareFn {}

tsx
type MiddlewareFn = (event: FetchEvent) => Promise<Response> | Response;
function MyMiddleware({ forward }: { forward: MiddlewareFn }): MiddlewareFn {}

entry-server.tsx

entry-server.tsx is where your app starts on the server.

Usage

Rendering your application

Reference

renderAsync(codeFn, options)

renderStream(codeFn, options)

renderSync(codeFn, options)