tsx
const logHelloconst logHello: ServerFunction<any[], (message: string) => Promise<void>>
= server$(alias) server$<any[], (message: string) => Promise<void>>(fn: (message: string) => Promise<void>): ServerFunction<any[], (message: string) => Promise<void>>
import server$
(async (message(parameter) message: string
: string) => { console.log(method) Console.log(...data: any[]): void
(message(parameter) message: string
) })
tsx
const logHelloconst logHello: ServerFunction<any[], (message: string) => Promise<void>>
= server$(alias) server$<any[], (message: string) => Promise<void>>(fn: (message: string) => Promise<void>): ServerFunction<any[], (message: string) => Promise<void>>
import server$
(async (message(parameter) message: string
: string) => { console.log(method) Console.log(...data: any[]): void
(message(parameter) message: string
) })
tsx
import server$(alias) const server$: CreateServerFunction
import server$
from 'solid-start/server'
function Componentfunction Component(): void
() { const logHelloconst logHello: ServerFunction<any[], (message: string) => Promise<void>>
= server$(alias) server$<any[], (message: string) => Promise<void>>(fn: (message: string) => Promise<void>): ServerFunction<any[], (message: string) => Promise<void>>
import server$
(async (message(parameter) message: string
: string) => { console.log(method) Console.log(...data: any[]): void
(message(parameter) message: string
) });
logHelloconst logHello: (message: string) => Promise<void>
('Hello') }
tsx
import server$(alias) const server$: CreateServerFunction
import server$
from 'solid-start/server'
function Componentfunction Component(): void
() { const logHelloconst logHello: ServerFunction<any[], (message: string) => Promise<void>>
= server$(alias) server$<any[], (message: string) => Promise<void>>(fn: (message: string) => Promise<void>): ServerFunction<any[], (message: string) => Promise<void>>
import server$
(async (message(parameter) message: string
: string) => { console.log(method) Console.log(...data: any[]): void
(message(parameter) message: string
) });
logHelloconst logHello: (message: string) => Promise<void>
('Hello') }
In this code snippet regardless of whether we are server rendering this component or client rendering it, the logHello
function generates a log on the server console only. How does it work? We use compilation to transform the server$
function into an RPC call to the server.
Log.tsx[client]
tsx
import server$(alias) const server$: CreateServerFunction
import server$
from 'solid-start/server'
// COMPILATION OUTPUT on the client
const serverFunction1const serverFunction1: ServerFunction<any, any>
= server$(alias) const server$: CreateServerFunction
import server$
.createFetcher(method) createFetcher(route: string): ServerFunction<any, any>
('/Log.tsx/logHello')
function Componentfunction Component(): void
() { const logHelloconst logHello: ServerFunction<any, any>
= serverFunction1const serverFunction1: ServerFunction<any, any>
;
logHelloconst logHello: (...p: unknown[]) => Promise<any>
('Hello') }
Log.tsx[client]
tsx
import server$(alias) const server$: CreateServerFunction
import server$
from 'solid-start/server'
// COMPILATION OUTPUT on the client
const serverFunction1const serverFunction1: ServerFunction<any, any>
= server$(alias) const server$: CreateServerFunction
import server$
.createFetcher(method) createFetcher(route: string): ServerFunction<any, any>
('/Log.tsx/logHello')
function Componentfunction Component(): void
() { const logHelloconst logHello: ServerFunction<any, any>
= serverFunction1const serverFunction1: ServerFunction<any, any>
;
logHelloconst logHello: (...p: unknown[]) => Promise<any>
('Hello') }
On the server, we hoist the function to the top-level scope and register it as a handler. If logHello
is called on the server, it will execute the function directly.
Log.tsx[server]
tsx
import server$(alias) const server$: CreateServerFunction
import server$
from 'solid-start/server'
// COMPILATION OUTPUT on the server
server$(alias) const server$: CreateServerFunction
import server$
.registerHandler(property) registerHandler: (route: string, handler: any) => any
( '/Log.tsx/logHello',
async (message(parameter) message: string
: string) => { console.log(method) Console.log(...data: any[]): void
(message(parameter) message: string
) }
)
const serverFunction1const serverFunction1: any
= server$(alias) const server$: CreateServerFunction
import server$
.createHandler(property) createHandler: (fn: any, hash: string) => any
('/Log.tsx/logHello', '#')
function Componentfunction Component(): void
() { const logHello = serverFunction1const serverFunction1: any
;
}
Log.tsx[server]
tsx
import server$(alias) const server$: CreateServerFunction
import server$
from 'solid-start/server'
// COMPILATION OUTPUT on the server
server$(alias) const server$: CreateServerFunction
import server$
.registerHandler(property) registerHandler: (route: string, handler: any) => any
( '/Log.tsx/logHello',
async (message(parameter) message: string
: string) => { console.log(method) Console.log(...data: any[]): void
(message(parameter) message: string
) }
)
const serverFunction1const serverFunction1: any
= server$(alias) const server$: CreateServerFunction
import server$
.createHandler(property) createHandler: (fn: any, hash: string) => any
('/Log.tsx/logHello', '#')
function Componentfunction Component(): void
() { const logHello = serverFunction1const serverFunction1: any
;
}