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) const renderAsync: (fn: (context: PageEvent) => JSX.Element, options?: {
timeoutMs?: number;
nonce?: string;
renderId?: string;
}) => ({ forward }: MiddlewareInput) => 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): ({ forward }: MiddlewareInput) => 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) const renderAsync: (fn: (context: PageEvent) => JSX.Element, options?: {
timeoutMs?: number;
nonce?: string;
renderId?: string;
}) => ({ forward }: MiddlewareInput) => 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): ({ forward }: MiddlewareInput) => 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
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) const renderAsync: (fn: (context: PageEvent) => JSX.Element, options?: {
timeoutMs?: number;
nonce?: string;
renderId?: string;
}) => ({ forward }: MiddlewareInput) => 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): ({ forward }: MiddlewareInput) => 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) const renderAsync: (fn: (context: PageEvent) => JSX.Element, options?: {
timeoutMs?: number;
nonce?: string;
renderId?: string;
}) => ({ forward }: MiddlewareInput) => 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): ({ forward }: MiddlewareInput) => 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) const renderStream: (fn: (context: PageEvent) => JSX.Element, options?: {
timeoutMs?: number;
nonce?: string;
renderId?: string;
}) => ({ forward }: MiddlewareInput) => 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, options?: {
timeoutMs?: number | undefined;
nonce?: string | undefined;
renderId?: string | undefined;
} | undefined): ({ forward }: MiddlewareInput) => 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) const renderStream: (fn: (context: PageEvent) => JSX.Element, options?: {
timeoutMs?: number;
nonce?: string;
renderId?: string;
}) => ({ forward }: MiddlewareInput) => 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, options?: {
timeoutMs?: number | undefined;
nonce?: string | undefined;
renderId?: string | undefined;
} | undefined): ({ forward }: MiddlewareInput) => 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) const renderSync: (fn: (context: PageEvent) => JSX.Element, options?: {
timeoutMs?: number;
nonce?: string;
renderId?: string;
}) => ({ forward }: MiddlewareInput) => 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?: {
timeoutMs?: number | undefined;
nonce?: string | undefined;
renderId?: string | undefined;
} | undefined): ({ forward }: MiddlewareInput) => 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) const renderSync: (fn: (context: PageEvent) => JSX.Element, options?: {
timeoutMs?: number;
nonce?: string;
renderId?: string;
}) => ({ forward }: MiddlewareInput) => 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?: {
timeoutMs?: number | undefined;
nonce?: string | undefined;
renderId?: string | undefined;
} | undefined): ({ forward }: MiddlewareInput) => 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 {}