search

marko-js / marko

A declarative, HTML-based language that makes building web apps fun
https://markojs.com/
MIT License
13.28k stars 641 forks source link

[question] How to use marko client-side and server-side ? #1447

Closed BigFax closed 3 years ago

BigFax commented 4 years ago

Hi, I am using Node, Express and Marko as a template engine to generate views server-side. Everything works fine.

Now, i am trying to use Marko as a client-side library in addition of server-side library. The goal is to add interactivity (data binding, events...). I didn't change any of my code, just followed the documentation to install, but it doesn't works.

I get out.global.__ is not a function error for this line ${ out.global.__('title') } . As precised here, this is because functions aren't serialized to the client. I checked this code with Koa, but here i18n works as an object and not as a function to call, so there is no problem with the serialization.

Notice that the page is well translated server side and well displayed client side (with translation), but looks like client-side try to process again the translation which generates an error. Why this is happening ?

I would like to get my page translated server-side and just process data binding, events, etc, client-side, but not the translation again.

I can provide code if necessary, but i think it's a simple generic question and it's just me who don't get it right.

Versions node: 8.11.3

"express": "^4.17.1", "@lasso/marko-taglib": "^1.0.15", "lasso": "^3.3.1", "lasso-marko": "^2.4.8", "marko": "^4.18.16", "marko-layout": "^2.0.2", "i18n": "^0.8.4"

Thank you in advance.

xtremespb commented 4 years ago

I have had such kind of problem. Take a look here: https://github.com/xtremespb/zoia2/blob/master/shared/marko/src/index.js

prasanthkv commented 4 years ago

these examples will give you some hints

BigFax commented 4 years ago

Thank you for answers.

@xtremespb is it about $global ? This way doesn't allow to pass function so error remains the same. I could prepare the data that I need to pass by executing the function server-side but passing all data needed to the browser by $global with preparation will be annoying. It will require to refactor the server code. Is it the solution you suggest ?

@prasanthkv I don't see how fetch could solve the problem and I don't see any function passed in the data inside the todo app.

I found this issue #646 which is in fact very close.

DylanPiercey commented 3 years ago

$global set on the server must be serializable to be used in the browser. You can list out the globals which should be serialized by following https://markojs.com/docs/server-side-rendering/#serializing-globals. However, something like this i18n translation function cannot easily be serialized and so you would have to instead use an i18n solution that could be loaded in the browser and in the server.