sure which one | Next.js | Page 1

ionic otter Jan 2, 2023, 9:55 AM

#

This one!

#

lol

stoic fable Jan 2, 2023, 9:55 AM

#

ah!

#

😅

ionic otter Jan 2, 2023, 9:55 AM

#

if i understand what you're doing

#

then you just need to publish a react package to npm

stoic fable Jan 2, 2023, 9:55 AM

#

Thanks for taking the time to let me pick your brain btw

ionic otter Jan 2, 2023, 9:55 AM

#

right?

#

no problem

stoic fable Jan 2, 2023, 9:56 AM

#

Yeah, and ive done this for component libraries in the past with rollup but never with next

ionic otter Jan 2, 2023, 9:56 AM

#

I built something very similar to what you're doing a few months ago

#

but it wasnt surveys

stoic fable Jan 2, 2023, 9:56 AM

#

and i'm trying to retain the ISR aspect of the app so that it can be generated based off of the json object

ionic otter Jan 2, 2023, 9:56 AM

#

theres a decision to make in this architecture

stoic fable Jan 2, 2023, 9:57 AM

#

For example, this is all my survey app structure is:

src
  pages
   [survey-id]
     [...question].tsx

ionic otter Jan 2, 2023, 9:57 AM

#

Do you care if consumers of your widget can decompile it and view the code of the react components

stoic fable Jan 2, 2023, 9:57 AM

#

which i think is pretty cool!
All the different components for questions can be rendered into that single page and based off the step-id in the json object it handles the order/sequence

ionic otter Jan 2, 2023, 9:58 AM

#

If the answer to that is no, then you most likely do not need an iframe

stoic fable Jan 2, 2023, 9:58 AM

#

well the components are actually in a component library that I built that is being imported as a package into next

#

but some of the questions require the camera and geolocation of the user

#

which apparently is possible with zoid

ionic otter Jan 2, 2023, 9:59 AM

#

and can do this by publishing your survey component to npm and asking them to provide an api key when rendering it inside their app

stoic fable Jan 2, 2023, 9:59 AM

#

but I do overall find iframes to be clunky and having a npm package that can be consumed by a client or other app is definitely preferred

ionic otter Jan 2, 2023, 9:59 AM

#

which will authenticate them with your api

stoic fable Jan 2, 2023, 9:59 AM

#

this is exactly what I am trying to do

ionic otter Jan 2, 2023, 9:59 AM

#

excuse me I meant to say

#

that you can still have your regular ISR site

stoic fable Jan 2, 2023, 10:00 AM

#

Man! If this is possible then I am so glad you responded

ionic otter Jan 2, 2023, 10:00 AM

#

and still serve content from a cached source of data (same one that ISR uses)

stoic fable Jan 2, 2023, 10:00 AM

#

I've written a SO question on this, posted on reddit, and like half a dozen discord channels haha

#

yeah which would be Vercel

ionic otter Jan 2, 2023, 10:00 AM

#

and you would just send your users to the vercel

#

if you're like, emailing them a survey link

#

instead of having the customer embed the survey within their app

stoic fable Jan 2, 2023, 10:01 AM

#

Nah its going to be hosted on their site/apps

ionic otter Jan 2, 2023, 10:01 AM

#

Okay then you can eliminate the static site for the survey entirely

#

and purely use the api

#

(but it may be useful to have around for demos!)

stoic fable Jan 2, 2023, 10:01 AM

#

so it would be like the typical way stripe or any SaaS works with doing a yarn add ...
or with a script tag
<script src="example.com/mywidget.js> ...settings </script>

#

then have it render inside of a div somewhere on their site
`<div id="app-container"></div>"

ionic otter Jan 2, 2023, 10:02 AM

#

because you can essentially demo a customers embeddeable widget

#

in your browser without having to actually embed it

#

by navigiating to you yourapp.vercel.app/survey/:id

#

whereas a customer could only reach that data via api calls

ionic otter Jan 2, 2023, 10:03 AM

#

stoic fable so it would be like the typical way stripe or any SaaS works with doing a `yarn ...

So for adding the <script>

#

I'm not entirely sure how to implement that

#

as I only focused on a react component

stoic fable Jan 2, 2023, 10:03 AM

#

I was initially planning on using next middleware or something to authenticate the api and see if the embedded survey should be shown

ionic otter Jan 2, 2023, 10:04 AM

#

but basically you would have a js script

#

which when mounted

stoic fable Jan 2, 2023, 10:04 AM

#

ionic otter and can do this by publishing your survey component to npm and asking them to pr...

How would this be done?

ionic otter Jan 2, 2023, 10:04 AM

#

(adds react if it's not already installed)

#

adds a new element to the dom, or confirms a target one exists

#

and injects your component into it

#

React 18 has a new api for doing this and I forgot what it's called l

stoic fable Jan 2, 2023, 10:05 AM

#

yup

ionic otter Jan 2, 2023, 10:06 AM

#

stoic fable How would this be done?

How would you publish a react npm package?

stoic fable Jan 2, 2023, 10:06 AM

#

But regarding the current next app I have, how would I bundle it out?

#

yeah but with next, like when the yarn build command is ran next basically see's getStaticPaths and builds out multiple files for all of the pages

#

ideally I would like to package allll of that into one package then the client would only display the survey that is accessible based of their API key correlated to the ID of the survey that was generated

ionic otter Jan 2, 2023, 10:07 AM

#

You can encapsulate any code, like getStaticPaths or getServerSideProps into a package and simply import it in your file and then rexport the function

stoic fable Jan 2, 2023, 10:07 AM

#

essentially
client npm install -> api key hits my server -> returns generated files

ionic otter Jan 2, 2023, 10:07 AM

#

https://github.com/TimMikeladze/tsup-react-package-starter

GitHub

GitHub - TimMikeladze/tsup-react-package-starter: Create, build & p...

Create, build & publish React packages with ease. Typescript, CSS, Jest & Storybook support out of the box. Integrates with Github releases and automatically publishes to NPM. Code ...

#

Follow the readme here

#

Use yalc to add the package into your nextjs project during development

#

so you dont have to publish it to npm constantly while consuming it

stoic fable Jan 2, 2023, 10:08 AM

#

then every time that the call is done from the clients site, it hits the api and vercel returns the latest files (or regenerates them if revalidate is triggered)

stoic fable Jan 2, 2023, 10:10 AM

#

ionic otter https://github.com/TimMikeladze/tsup-react-package-starter

So I guess my question here is if this deploys the package, and my next project uses dynamic routes eg., [...question].tsx
would this publish just that skeleton or would it publish the generated surveys from the moment the build command was ran (but not subsequent if changes to the api/json object are made)?

ionic otter Jan 2, 2023, 10:10 AM

#

Sorry i dont understand the question in its entirety

#

can you rephrase it a bit?

stoic fable Jan 2, 2023, 10:11 AM

#

Okay no problem, so my current page structure is like this:

pages 
  [survey-id]
    [...question].tsx

#

but what is generated, lets say I have 4 clients:
Amazon
Tesla
Airbnb
Nike

#

Would be like

NikeSurvey.html, -> question1, question2, question3
AmazonSurvey.html -> question1, question2, question3, question4
etc..

ionic otter Jan 2, 2023, 10:13 AM

#

if you dont need an iframe then you dont need a static site

stoic fable Jan 2, 2023, 10:13 AM

#

and since it is hosted on vercel and i am using getStaticProps
I have revalidate: 30 inside of the function
So Vercel will revalidate the cache and see if any changes in that fetch/api have been made

ionic otter Jan 2, 2023, 10:13 AM

#

and you said the customer is using only the react npm package

#

which communicates with your nextjs api

stoic fable Jan 2, 2023, 10:13 AM

#

lets say we change the order of AmazonSurvey questions and replace 3 and 4
then I hit it again, and all the routes would be updated but the client would get
AmazonSurvey.html -> question1, question2, question4, question3,

ionic otter Jan 2, 2023, 10:14 AM

#

so why use these pages?

stoic fable Jan 2, 2023, 10:15 AM

#

well I built with next so that I could leverage the dynamic pages/router that it has

#

All of the application exists in the _app and [...question].tsx files

ionic otter Jan 2, 2023, 10:16 AM

#

I see

stoic fable Jan 2, 2023, 10:16 AM

#

and depending on the return from the api it generates the components required for each question and handles the routing

ionic otter Jan 2, 2023, 10:16 AM

#

you know about the /pages/api folder right?

stoic fable Jan 2, 2023, 10:16 AM

#

and it scompletely agnostic to the client or theming

#

yeah

ionic otter Jan 2, 2023, 10:16 AM

#

and the contents of getServerSideProps and getStaticProps can be extracted into functions that live elsewhere

#

So you can move all that to /pages/api and then communicate via rest / graphql api

stoic fable Jan 2, 2023, 10:17 AM

#

I am not sure how that translates to the front-end though

ionic otter Jan 2, 2023, 10:17 AM

#

to fetch your content

#

Your requirements just aren't clear sorry

#

You built a static site, but want to ship to the customer as a react package but don't want to use an iframe to do it

stoic fable Jan 2, 2023, 10:18 AM

#

well I think ISR is kind of like a SSR and SSG site combined, right?

#

i wanted the best of both worlds

ionic otter Jan 2, 2023, 10:18 AM

#

You want to use a React package but that wont work with your existing static site because you will be expected to fetch data over rest/graphql to feed it to the react component to render it

#

so take "react" portions your page files and move it to the react package (which will be published to the customer)

#

and then take the the "getServerSideProps", etc functions and move them to live as part of your api under /pages/api

#

Alternatively, ship an iframe

stoic fable Jan 2, 2023, 10:20 AM

#

Its not getServerSideProps though, its getStaticProps

ionic otter Jan 2, 2023, 10:20 AM

#

Or redefine your requirements

stoic fable Jan 2, 2023, 10:20 AM

#

which has the revalidate property

ionic otter Jan 2, 2023, 10:20 AM

#

What I said above still applies

stoic fable Jan 2, 2023, 10:20 AM

#

sorry if im not explaining this clearly, just excited to be brainstorming on this haha

ionic otter Jan 2, 2023, 10:20 AM

#

"revalidate" is just a fancy cache around your page content

stoic fable Jan 2, 2023, 10:20 AM

#

Yeah but it also regenerates static files

ionic otter Jan 2, 2023, 10:21 AM

#

a cache miss to your api will regenerate your cached api response (which is equivalent to your static file content minus the html)

stoic fable Jan 2, 2023, 10:21 AM

#

yes but then that requires the survey to be CSR

ionic otter Jan 2, 2023, 10:21 AM

#

No

stoic fable Jan 2, 2023, 10:21 AM

#

really?

ionic otter Jan 2, 2023, 10:21 AM

#

That would be up to the customer to decide

#

and on how you architect your component

#

also, CSR is fine

#

especially for a widget like this

stoic fable Jan 2, 2023, 10:22 AM

#

I guess the way I am thinking about this is the API is just responding with a JSON object and then next is taking that json object and building out the pages and handling the routing from one to the other based off the contents of the object

ionic otter Jan 2, 2023, 10:22 AM

#

It's unlikely your customers will be using SSR in the first place I'm just guessing based on experience

#

"and then next is taking that json object and building out the pages and handling the routing from one to the other based off the contents of the object"

#

replace this with

#

"next is communicating with your database / some other api to fetch content, and then returning it as a JSON object"

#

pages/api/:surveyId/index.ts

stoic fable Jan 2, 2023, 10:24 AM

#

gotcha

ionic otter Jan 2, 2023, 10:24 AM

#

for example

#

you can use nextjs just as a regular "serverless" api server

stoic fable Jan 2, 2023, 10:25 AM

#

yeah but then what about the UI/UX of the application?

ionic otter Jan 2, 2023, 10:25 AM

#

and skip the react portion entirely

#

that is your react component

#

its not even part of your next app

#

and probably lives in a different repo / codebase

#

It renders the survey by fetching data from your next api

stoic fable Jan 2, 2023, 10:25 AM

#

So are you saying to ditch the [...question].tsx /dynamic routing aspect of it entirely?

ionic otter Jan 2, 2023, 10:25 AM

#

Entirely

#

Based on what you said

stoic fable Jan 2, 2023, 10:26 AM

#

aw man I was really happy with the current setup

ionic otter Jan 2, 2023, 10:26 AM

#

and after I clarified it

#

that an iframe will not suffice

#

then yes, you need to refactor

#

but it shouldn't be major one

#

since it's just moving code around right?

#

and the project will be better for it I hope

stoic fable Jan 2, 2023, 10:27 AM

#

because right now I can hit any url that I have hosted and depending on the request it will render out the survey. If I modify the json object in the api, it will regenerate that survey live without a redeploy being done

ionic otter Jan 2, 2023, 10:27 AM

#

yep

#

iframes pretty nice for that

#

to ship to a customer

stoic fable Jan 2, 2023, 10:27 AM

#

I was hoping there would be a way to have an npm package act as that sort of middleman

ionic otter Jan 2, 2023, 10:27 AM

#

You can ship an npm package which injects an iframe

#

lol

stoic fable Jan 2, 2023, 10:28 AM

#

basically hit my hosted site and return a built out version for that survey id and then inject that into a div

ionic otter Jan 2, 2023, 10:28 AM

#

yep exactly

stoic fable Jan 2, 2023, 10:28 AM

#

and each time that the request is made it fetches that bundle or regenerates and sends that one back

ionic otter Jan 2, 2023, 10:28 AM

#

yeah that's the iframe approach

#

there's just trade offs here to make

#

and how much effort to spare

stoic fable Jan 2, 2023, 10:29 AM

#

I guess what im wondering then is when I used rollup to build the design system, it's on react and i would export each component in an index.js file, and then the npm package has a single entry point

#

when that is added to a project, I can import the component and it grabs that export

ionic otter Jan 2, 2023, 10:30 AM

#

yeah

stoic fable Jan 2, 2023, 10:30 AM

#

You know stripe?

ionic otter Jan 2, 2023, 10:30 AM

#

Oh yeah

stoic fable Jan 2, 2023, 10:30 AM

#

Sort of how their onboarding works for their checkout

ionic otter Jan 2, 2023, 10:30 AM

#

stripe uses an iframe

#

I believe

stoic fable Jan 2, 2023, 10:31 AM

#

it has multiple steps inside of it

ionic otter Jan 2, 2023, 10:31 AM

#

in their latest version

#

one sec

stoic fable Jan 2, 2023, 10:31 AM

#

haha really?

#

There's another survey type flow by persona

ionic otter Jan 2, 2023, 10:31 AM

#

I think so

stoic fable Jan 2, 2023, 10:31 AM

#

that looks like they render it all out

ionic otter Jan 2, 2023, 10:31 AM

#

i havent used Elements in a while

#

and prefer the customer portal instead

stoic fable Jan 2, 2023, 10:32 AM

#

Screen_Shot_2023-01-02_at_4.32.12_AM.png

ionic otter Jan 2, 2023, 10:32 AM

#

easier to send people directly to stripe than embedding pieces of stripe in my app

stoic fable Jan 2, 2023, 10:32 AM

#

Screen_Shot_2023-01-02_at_4.32.47_AM.png

ionic otter Jan 2, 2023, 10:34 AM

#

what am i looking at here?

stoic fable Jan 2, 2023, 10:34 AM

#

The top one is a company called persona it looks like theirs doesnt use an iframe but it its 'survey-esque'

#

and then the second is stripe, there are iframes at the bottom but they are all empty,

ionic otter Jan 2, 2023, 10:35 AM

#

I gotta go to bed

#

good luck figuring out how to design this

stoic fable Jan 2, 2023, 10:35 AM

#

ah no worries

#

thanks again for all the help, haha

ionic otter Jan 2, 2023, 10:35 AM

#

no problem

stoic fable Jan 2, 2023, 10:35 AM

#

can I add you and maybe pick your brain on this some more another time?

ionic otter Jan 2, 2023, 10:36 AM

#

you're better off just posting in the help forum or in some other channel here

#

I think i have dms / friends disabled

#

on most discords

stoic fable Jan 2, 2023, 10:36 AM

#

ah, okay

ionic otter Jan 2, 2023, 10:36 AM

#

but you can follow me on twitter lol

#

ahaha

#

or on github

stoic fable Jan 2, 2023, 10:36 AM

#

haha, sure will do

ionic otter Jan 2, 2023, 10:36 AM

#

or wherever

#sure which one