Would it be possible to use Server Side Rendering (SSR) for NUI?

FiveM Resource Development Discussion
1

I’ve been wondering, if it would be possible to use Server Side Rendering, in NUI. For example with Sveltekit.

If it’s not possible directly in FiveM, would it then be possible to have for example a Node.js server running, and then fetch the server side rendered things clientside?

Thanks in advance.

2

I don’t believe its possible directly in FiveM.

However, much like I did myself, you can create a NodeJS Express server that serves the SvelteKit website, and then set your fxmanifest ui_page directly to the correct url. (you can also use an iframe, but I had some focus issues and some other that I didn’t get solved, so I figured the fxmanifest was the best way).

Hope that helps :slight_smile:

3

Thanks for the reply, I will do some testing.

4

Is there any particular settings needed to be made in the sveltekit code?

Or is it enough to just use the adapter-node?

5

I use default vite settings, with just adapter-node.

6

Okay, will reply when/if I get it to work.

Did you test on a local hosted NodeJS Express server? Or a server you hosted somewhere else?

7

I use a localhosted express js server, which is forwarded to a free cloudflare domain for SSL certificate, to then use https://my-domain.com in the fxmanifest.

This is just for my development environment of course, you shouldn’t use your own ip adress for any production server.

8

Okay, will do some testing.

9

Thank you so much, it worked. But how would I make nui-callbacks, database calls (with oxmysql) and other stuff like that?

Can’t think of a way to do it.

EDIT:
For some reason, transparency doesn’t seem to work. I did a test, where I just had text, and nothing else but there is still a white background ingame.

10

From SvelteKit server? No you can’t, you can use mysql2 (which oxmysql also uses) in your SvelteKit project to setup a mysql connection (like I do, but with mongodb instead) - or alternatively setup a api in your FiveM server to execute queries, but I wouldn’t do that just for security reasons.

I’m not sure about NUI callbacks, but I assume they can be done in the client by just using any fetch but instead doing https://<resource name>/<event name> as endpoint? You would have to test this out in-game. I wouldn’t be sure as my ui is hooked up to a server-side api to request certain data, instead of FiveM’s NUI Callbacks.

For your transparency issue, your body probably has a default white background. This is my body styling in app.css

body {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;

    background: transparent;
}
11

Okay, would it be possible to handle the database things in lua (on the server side) with oxmysql and then send the data from for example a select option to the sveltekit server, and then show the data?

For example:
Do a select option (with oxmysql in a lua server file) that gets all posts of a user.
Then send the data to the SvelteKit server, with a NUIMessage.
Then put all posts in a list.

12

If the fetch doesn’t work with the correct endpoint, I think it would be logical to create an api using SetHttpHandler, which you can call with the necessary options to add to your query and then return the data based on those options.

To call that api, the endpoint would be http://<your server ip>/<resource name>/<path>, for example: http://127.0.0.1/ui/getUserPosts.

In my opinion, if your goal is just to access a couple of things from the database, why go to the length of creating a http handler to access the data, instead of just using the mysql npm package which would be directly accessible in the SvelteKit server page?

If you should need any identifiers, just create a store that you update when the player loads (or whenever you see fit) using a NUI message.

13

Thank you so much for your help, I appreciate it.

I will try.